<template>
	<div class="main register">
		<el-form ref="filterData" :model="filterData" :rules="filterDataRules" auto-complete="on" label-position="left">			
			<div class="dialog">				
				<div>
					<span class="dialog-name">商家名称：</span>
					<el-form-item prop="name">
						<span class="dialog-msg"><el-input v-model="filterData.name" placeholder="商家名称"></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">登录账号：</span>
					<el-form-item prop="username">
						<span class="dialog-msg"><el-input v-model="filterData.username" placeholder="登录账号"></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">登录密码：</span>
					<el-form-item prop="password">
						<span class="dialog-msg"><el-input v-model="filterData.password" placeholder="登录密码"></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">确认密码：</span>
					<el-form-item prop="password2">
						<span class="dialog-msg"><el-input v-model="filterData.password2" placeholder="确认密码"></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">所属地区：</span>					
					<el-form-item prop="areaArr">
						<span class="dialog-msg"><el-cascader size="large":options="options" v-model="filterData.areaArr" @change="handleChange"></el-cascader></span>
					</el-form-item>					
				</div>
				<div>
					<span class="dialog-name">公司地址：</span>
					<el-form-item prop="address">
						<span class="dialog-msg"><el-input v-model="filterData.address" placeholder="公司地址"></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">邀请码：</span>
					<el-form-item prop="InvitationCode">
						<span class="dialog-msg"><el-input v-model="filterData.InvitationCode" placeholder="邀请码（可不填）"></el-input></span>
					</el-form-item>
				</div>
				<!--<div>
					<span class="dialog-name">合同编号：</span>
					<el-form-item prop="contractNum">
						<span class="dialog-msg"><el-input v-model="filterData.contractNum" placeholder="合同编号"></el-input></span>
					</el-form-item>
				</div>-->
				<div>
					<span class="dialog-name">营业执照：</span>
					<el-form-item prop="license">
						<span class="dialog-msg upload-demo">
							<div slot="tip" class="el-upload__tip">上传jpg/png文件，不超过1MB</div>
							<el-upload
							  class="avatar-uploader"
							  ref="upload"
							  :action="baseURL"
							  :before-upload="beforeAvatarUpload"
							  :on-success="uploadSuccess"
							  :on-change="uploadChange"
							  :file-list="fileList" 
							  :show-file-list="false"
							  >							  
							  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  							  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</span>
						<el-input v-model="filterData.license" placeholder="" disabled></el-input>
					</el-form-item>
				</div>				
				<div class="btnBox">
					<el-button type="info" @click='register'>注册</el-button>
					<el-button type="info" @click='reset'>重置</el-button>
					<el-button type="info" @click='toLogin'>去登录</el-button>
				</div>
				<div class="colorBlue">注册默认同意<span @click="dialog1">广告平台服务协议</span>，并同意<span @click="dialog1">平台注册会员管理规定</span></div>
			</div>
		</el-form>	
		<el-dialog
		  title="广告平台服务协议"
		  :visible.sync="dialogBox1"
		  width="80%"
		  center>
		  <span>  
			广告平台服务协议（简称本协议）由广告平台的所有人河南微广信息科技有限公司（简称广告平台）与您签订。<br />
			一、广告平台服务协议的签订<br />
			1 、因为本协议约定了您的权利和义务，如果行使权利或履行义务不当，将会给您带来法律上的责任，故请阅读本协议内容，特别是影响你切身利益的规定条款。您一旦在页面点击或其他方式确认，则证明您已同意并签署了本协议，对双方产生法律效力。您在本协议中称为广告客户，我们则在本协议中称为广告平台。<br />
			2 、如我们对本协议进行修改，我们将在平台上以公告的方式提前告知，如未有特别说明，修改部分自公布之日起生效，如您不能接受修改部分条款内容，你可以选择退出，但并不能因此消除或减轻你原来的协议及法定义务。<br />
			二、广告平台服务协议主体资格<br />
			1、您在签订本协议时，必须具有符合中国法律规定的民事行为能力，既您有签订协议法律资格的自然人、法人、个体工商户或其他组织。在平台的监督帮助下，您可以在平台上寻找为您发布广告的平台注册会员，经您和你选择的平台注册会员协商后，您可以与其签订独立的广告发布协议，以规范您与平台注册会员之间的权利和义务关系。<br />
			2、我们在签订本协议时，向您提供一个平台，以帮助您寻找能为您发布广告的平台注册会员。 <br />
			三、平台的法律地位及您与平台注册会员既广告发布者的法律地位。<br />
			1、广告服务平台在法律上，具有《中华人民共和国合同法》第四百二十四条规定的居间人的法律地位，按照“居间合同是居间人向委托人报告订立合同的机会或者提供订立合同的媒介服务，委托人支付报酬的合同。”行使权利承担义务。<br />
			2、您作为广告客户按照《中华人民共和国合同法》第四百二十四条的规定，委托我平台为您与平台注册会员寻找、撮合订立发布广告服务合同的机会。<br />
			3、平台注册会员将按照与您签订的《广告服务合同》与您产生合同上的权利义务关系。<br />
			4、《广告平台服务协议》是平台与您签订的中介合同，《广告服务合同》是您与平台注册会员签订的广告发布合同。<br />
			四、广告平台服务协议的权利义务。<br />
			1、　广告服务平台将根据您的需要及委托向您及时报告订立《广告服务合同》机会<br />
			2、广告服务平台应当就有关订立合同的事项向您如实报告。<br />
			3、广告服务平台将依法保护您的商业秘密、个人隐私等在合作过程中可能获得的您的信息。<br />
			4、您在签订本协议时，您承诺您向广告平台提交的任何文件资料、填写的任何内容或作出的承诺，都是客观真实且符合法律规定的。<br />
			5、您在广告服务平台上与注册会员所签订的《广告服务合同》内容符合法律规定，并无违法情形存在，如果因此产生的任何民事、行政、刑事的法律责任，将由您与《广告服务合同》相对人注册会员承担。<br />
			6、您在签订本协议时，应按照双方约定的方式通过第三方向我们平台支付中介费用及您与平台注册会员按照《广告服务合同》约定的广告费用。<br />
			五、平台审核<br />
			1、您入驻平台时，广告服务平台将对您进行审核，包括但不限于对您企业资质和产品资质进行审核。因此您有义务配合平台进行上述审核。<br /> 
			2、您发布广告时，广告服务平台将对您进行审核，包括但不限于审核发布违法、违规、侵权、假冒伪劣产品等广告内容。<br />
			3、为了您的利益，您有权在发布任务的时候，选择地区、性别、年龄、职业等精准性条件。<br />
			4、您有任务完成情况审核权，发现有疑问的，您可向平台投诉，平台客服介入处理，但平台介入处理并非法律上义务，您不能因此向平台提出任何法律责任的诉请，《广告服务合同》相对人既平台注册会员给您造成的损失，你可以选择诉讼或仲裁程序予以解决。<br />
			5、广告服务平台作为居间人，并不能因为行使审核权，而给自己产生额为的法律责任。<br />
			六、费用支付<br />
			1、您可以自主充值，最低充值金额不能低于五百元人民币，充值后金额不可退。<br />
			2、前期充值有赠送金额，依当时充值赠送比例为准，赠送方式、额度等将有广告服务平台以公告的形式予以发布。<br />
			3、发布任务条数和任务单价由您自己决定，单个任务单价不得低于一元。<br />
			4、平台注册会员按照您下单的任务完成，经您审核确认后，将由平台从您的预存款内予以支付。<br />
			七、在需要终止使用广告平台服务时，您可以按照平台规定的程序，申请注销您的会员号或广告平台账户<br />
			八、使用广告平台服务的注意事项<br />
			1、身份验证。您在注册、使用时，请您提供合法、真实、有效、准确的身份资料及证照。<br /> 
			2 、广告信息资料验证。为了满足相关监管规定的要求，您有义务提供相关的广告信息资料。<br />
			九、您合法使用广告平台服务：<br />
			1、您需要遵守中华人民共和国相关法律、法规，不得为非法目的，及非法方式使用我们的平台服务。<br />
			2、您不得利用我们的服务平台从事违法、犯罪的行为。<br />
			3、 您不能利用平台发布违反广告法及相关法律、法规的广告。<br />
			4、您因为违法发布广告给平台及他方造成损失的，您将承担相应的法律责任。<br />
			十、您的权益保护<br />
			1、我们平台将依法保护您的合法权益和隐私，但因为行政、诉讼等合法需要的除外。<br />
			十一、免责条款<br />
			因客观的、不可抗力等因素导致我们无法正常为您提供平台广告服务，将按照法律规定免除我们的责任<br /> 
			十二、 法律适用 <br />
			因本协议发生争议，按照中华人民共和国法律规定，由平台所有者住所地人民法院管辖。</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogBox1 = false">取 消</el-button>
		    <el-button type="primary" @click="dialogBox1 = false">确 定</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="平台注册会员管理规定"
		  :visible.sync="dialogBox2"
		  width="80%"
		  center>
		  	<span>
			广告平台注册会员协议
			广告平台注册会员协议（简称本协议）由广告平台的所有人河南微广信息科技有限公司（简称广告平台）与您签订。<br />
			1 、因为本协议约定了您的权利和义务，如果行使权利或履行义务不当，将会给您带来法律上的责任，故请阅读本协议内容，特别是影响你切身利益的规定条款。您一旦在页面点击或其他方式确认，则证明您已同意并签署了本协议，对双方产生法律效力。您在本协议中称为广告发布者，我们则在本协议中称为广告平台。<br />
			2 、如我们对本协议进行修改，我们将在平台上以公告的方式提前告知，如未特别说明，修改部分自公布之日起生效，如您不能接受修改部分条款内容，你可以选择退出，但并不能因此消除或减轻你原来的协议或法定义务。<br />
			二、广告平台注册会员协议主体资格<br />
			1、您在签订本协议时，必须具有符合中国法律规定的民事行为能力，既您有签订协议法律资格的自然人、法人、个体工商户或其他组织。平台上为您寻找、撮合需要发布广告的客户，经您和您撮合成功的广告客户协商后，您可以与其签订独立的广告发布协议，以规范您与平台广告客户之间的权利、义务关系。<br /> 
			2、您在注册的时候必须要进行实名认证，与身份证信息完全相符，因您提供的信息出现瑕疵，给您及他人产生的损失，将由您承担。<br />
			3、在签订本协议时，我们向您提供一个平台，以帮助您寻找并撮合广告客户。 <br />
			三、平台的法律地位、及您与广告客户的法律地位。<br />
			1、广告服务平台在法律上，具有《中华人民共和国合同法》第四百二十四条规定的居间人的法律地位，按照“居间合同是居间人向委托人报告订立合同的机会或者提供订立合同的媒介服务，委托人支付报酬的合同。”的规定，广告服务平台行使权利承担义务。<br />
			2、您作为广告平台注册会员按照《中华人民共和国合同法》第四百二十四条的规定，委托我平台为您与广告客户之间撮合订立发布《广告服务合同》的机会。<br />
			3、广告客户将按照与您签订的《广告服务合同》与您产生合同上的权利义务关系。<br />
			4、《广告平台注册会员协议》是平台与您签订的中介合同，《广告服务合同》是您与平台广告客户签订的广告发布合同。<br />
			四、广告平台注册会员协议的权利义务内容。<br />
			1、　广告服务平台将根据您的需要及委托向您及时报告订立《广告服务合同》机会<br />
			2、广告服务平台应当就有关订立合同的事项向您如实报告。<br />
			3、广告服务平台将依法保护您的商业秘密、个人隐私等在合作过程中可能获得的您的信息。<br />
			4、您在签订本协议时，您承诺您向广告平台提交的任何文件资料、填写的任何内容或作出的承诺，都是客观真实且符合法律规定的。<br />
			5、您在广告服务平台上与广告客户所签订的《广告服务合同》相关的内容符合法律规定，并无违法情形存在，如果因此产生的任何民事、行政、刑事的法律责任，将由您及《广告服务合同》相对人承担。<br />
			6、您在签订本协议后，应按照双方约定的方式及时、有效、善意履行您与平台广告客户所签订的《广告服务合同》约定 各项义务。<br />
			五、平台审核<br />
			1、您入驻平台时，广告服务平台将对您进行审核，包括但不限于对您的资质和个人信息进行审核。因此您有义务配合平台进行上述审核。<br /> 
			2、您接收广告发布任务时，广告服务平台将对您发布广告方式或内容进行审核，包括但不限于审核采用违法、违规、侵权等手段发布广告。<br />
			3、为了您利益，您有权在发布广告前，认真审核广告客户发布的广告是否存在违反、违规、侵权、虚假等内容。<br />
			4、您有任务完成情况申诉权，对广告客户投诉或提出的疑问，您可以向平台客服提出自己的申辩理由。平台介入处理，并非法律上义务，您不能因此向平台提出任何法律责任的诉请，《广告服务合同》中的广告客户给您造成的损失，你可以选择诉讼或仲裁程序予以解决。<br />
			5、广告服务平台作为居间人，并不能因为行使审核权或为您解决纠纷，而给自己产生任何额为的法律责任。<br />
			六、费用支付<br />
			1、您可以推荐他人注册为本平台会员，推荐成功后，该注册会员将永久绑定在您名下，成为您的下级会员。当您推荐的注册会员完成任务后，您可根据会员级别享有您的下级会员的利益分成。<br />
			2、会员及佣金管理。会员分为两个级别，即普通会员和高级会员。会员注册后默认为普通会员，其任务佣金为任务总额的40%，及其下级完成任务的佣金5%。高级会员需要交纳29.9元（会员注销不退）升级，升级后任务佣金是60%，及其下级完成任务的佣金10%。<br />
			3、会员在任务大厅当中根据可接任务来选择任务赚取佣金，会员在接取任务后必须按照平台任务要求完成任务，如有作假等不正当行为，平台会根据情况进行处理，严重的封停账户及账户佣金。<br />
			4、会员获得佣金后随时可进行提现，提现后24小时到账。<br />
			5、会员任务分说明：<br />
			（1）、新注册会员的任务分为100分（满分为100分）<br />
			（2）、当会员一天不接任务的时候任务分会降低一分，任务分低于80分（不含80分）的时候会员所有佣金获取为佣金的50%，任务分低于50分（不含50分）的时候会员所有佣金获取为佣金的20，会员分低于20分（不含20分）佣金所得为0.<br />
			（3）、所有会员每天可根据自身情况在任务大厅接取两条任务（每天可接任务数后期根据平台情况调整），会员每完成一条任务即加一点任务分，满分情况下不累计。<br />
			七、在需要终止使用广告平台服务时，您可以您可以按照平台规定的程序，申请注销您的会员号或广告平台账户<br />
			八、使用广告平台服务的注意事项<br />
			1、身份验证。您在注册、使用时，请您提供合法、真实、有效、准确的身份资料及证照。<br /> 
			2 、广告信息资料验证。为了满足相关监管规定的要求，根据需要，您有义务提供相关的广告发布情况资料。<br />
			九、您合法使用广告平台服务：<br />
			1、您需要遵守中华人民共和国相关法律、法规，不得为非法目的，及非法方式使用我们的平台服务。<br />
			2、您不得利用我们的服务平台从事违法、犯罪的行为。<br />
			3、 您不能利用平台发布违反广告法及相关法律、法规的广告。<br />
			4、您因为违法发布广告给平台及他方造成损失的，您将承担相应的法律责任。<br />
			十、您的权益保护<br />
			1、我们平台将依法保护您的合法权益和隐私，但因为行政、诉讼等合法需要的除外。<br />
			十一、免责条款<br />
			因客观的、不可抗力等因素导致我们无法正常为您提供平台广告服务，将按照法律规定免除我们的责任<br /> 
			十二、 法律适用 <br />
			因本协议发生争议，按照中华人民共和国法律规定，由广告平台所有者住所地人民法院管辖。<br /> 
			 </span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogBox2 = false">取 消</el-button>
		    <el-button type="primary" @click="dialogBox2 = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import { regionData ,CodeToText } from 'element-china-area-data'
	import {register} from '@/api/common'
	import { Message, MessageBox } from 'element-ui'
	export default {
		methods: {			
		    beforeAvatarUpload(file) {
		        const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 1;		
		        if (!isJPG&&!isPNG) {
		          this.$message.error('上传图片只能是 JPG/png 格式!');
		        }
		        if (!isLt2M) {
		          this.$message.error('上传图片大小不能超过 1MB!');
		        }
		        return (isPNG||isJPG) && isLt2M;
		    },
		    uploadChange(file,fileList){
		    	this.imageUrl = URL.createObjectURL(file.raw);
		    },     		
		    uploadSuccess(response, file,fileList){
				console.log(response);				
				this.filterData.license = response.data.url;
			},	
			handleChange (value) {
        		var ctt = CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]]
        		console.log(ctt)
        		this.filterData.province = CodeToText[value[0]];
        		this.filterData.city = CodeToText[value[1]];
        		this.filterData.area = CodeToText[value[2]];
        		console.log(this.filterData.province + this.filterData.city +this.filterData.area)
      		},
			register() {
				console.log(this.filterData)
				this.$refs.filterData.validate(valid => {
					if(valid){		
						register(this.filterData).then(res =>{
							Message({
						      	message: '注册成功，请等待管理员审核！',
						      	type: 'success',
						      	duration: 2 * 1000
						    })
							this.$router.push('/login')
						}).catch(res =>{
							console.log(123123132132)
							console.log(res)
							Message({
						      	message: res.msg,
						      	type: 'error',
						      	duration: 2 * 1000
						    })
						})
					}
					
				})
			},			
			reset(){
				this.filterData = {
					name: '', 				//商家名称
					address: '', 			//公司地址
					//contractNum: '', 		//合同编号
					areaArr: [], 				//所属地区 
					license:'',				//图片地址
					password:'',			//密码
					username:'',			//用户名
					password2:'',			//重复密码
					InvitationCode:'',		//邀请码
					province: '', 					//省
					city: '', 						//市
					area: '', 						//区
				}
			},
			toLogin(){
				this.$router.push('/login')
			},
			dialog1(){
				this.dialogBox1 = true;
			},
			dialog2(){
				this.dialogBox2 = true;
			},
		},
		data() {
			const notNull = (rule, value, callback) => {
				if(value == '') {
					callback(new Error('输入不能为空！'))
				} else {
					callback()
				}
			}
			const phoneNum = (rule,value,callback) => {
				if(!(/^1[34578]\d{9}$/.test(value))) {
					callback(new Error('手机号码不正确！'))
				} else {
					callback()
				}
			}
			const passValue = (rule, value, callback) => {
				if(6 > value.length || value.length > 12){
					callback(new Error('请输入6-12位密码'))
				}else {
					callback()
				}
			}
			const passAgain = (rule, value, callback) => {
				if(value != this.filterData.password){
					callback(new Error('两次密码不一致！'))
				}else {
					callback()
				}
			}
			return {
				//主列表数据
				filterData: {
					name: '', 				//商家名称
					address: '', 			//公司地址
					//contractNum: '', 		//合同编号
					areaArr: [], 				//所属地区 
					license:'',				//图片地址
					password:'',			//密码
					username:'',			//用户名
					password2:'',			//重复密码
					InvitationCode:'',		//邀请码
					province: '', 					//省
					city: '', 						//市
					area: '', 						//区
				},
				imageUrl: '',
				fileList: [],
				dialogBox1:false,
				dialogBox2:false,
				baseURL: process.env.BASE_API + "/upload/uploadImage",    // api 的 base_url
				filterDataRules:{
					name: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],					
					address: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],
					/*contractNum: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],*/
					license: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],
					area: [{
						required: true,
						trigger: 'change',
						validator: notNull
					}],
					password: [{
						required: true,
						trigger: 'blur',
						validator: passValue
					}],
					password2: [{
						required: true,
						trigger: 'blur',
						validator: passAgain
					}],
					username: [{
						required: true,
						trigger: 'blur',
						validator: phoneNum
					}],

				},
				options: regionData , //地区选项
			}
		}
	}
</script>
<style scoped>
	.area-select-wrap {
		display: inline-block;
		margin-left: 0;
	}
	
	.area-select-wrap .area-select {
		margin-left: 0;
		vertical-align: middle;
		height: 40px
	}
	
	.dialog {
		border: 1px solid #ddd;
		padding: 15px;
	}
	
	.register .dialog .el-input {
		display: inline-block;
		width: 70%;
	}
	
	.register .el-cascader .el-input {
		display: inline-block;
		width: 100%;
	}
	
	.dialog-name {
		width: 25%;
		display: inline-block;
	}
	
	.main {
		width: 100%;
		margin: 0 auto;
	}
	
	.btnBox {
		text-align: center;
	}
	.el-form-item {
		width:73%;
		display: inline-block;
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	    width:178px
	  }
	.avatar-uploader{
	  	border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	    width:178px
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	  .colorBlue {
	  	text-align: center;
	  }
	  .colorBlue span {
	  	color:blue;
	  	cursor: pointer;
	  }
</style>